<template>
  <div class="photolist">
    <van-tabs @click="getImages">
      <van-tab v-for="(cate) in cates" :key="cate.id" :title="cate.title">
        <div v-if="imgs.length !==0">
          <img v-lazy="img.img_url" alt v-for="img in imgs" :key="img.id" @click="goPhotoInfo(img.id)" />
        </div>
        <div v-else>暂无数据</div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
export default {
  data: () => ({
    cates: [],
    imgs: []
  }),
  created () {
    this.getCates()
    this.getImages(0)
  },
  methods: {
    async getCates () {
      const {
        data: { status, message }
      } = await this.$http.get('api/getimgcategory')
      if (status !== 0) return this.$toast(message)
      console.log(message)
      this.cates = message
      message.unshift({
        id: 0,
        title: '全部'
      })
    },
    async getImages (cateid) {
      const {
        data: { status, message }
      } = await this.$http.get('api/getImages/' + cateid)
      if (status !== 0) return this.$toast(message)
      console.log(message)
      this.imgs = message
    },
    goPhotoInfo (id) {
      this.$router.push('/home/photoinfo/' + id)
    }
  }
}
</script>
<style lang="less" scoped>
.photolist {
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
